<template>
  <div style="height: 100%">
    <ag-grid-vue
      style="width: 800px; height: 800px;"
      class="ag-theme-quartz"
      :localeText="localeText"
      :columnDefs="columnDefs"
      @grid-ready="onGridReady"
      :defaultColDef="defaultColDef"
      :rowData="rowData">
    </ag-grid-vue>
  </div>
</template>

<script>
import {  onBeforeMount, ref, shallowRef ,getCurrentInstance} from "vue";
import { AG_GRID_LOCALE_ZZZ } from '@/utils/locale.js'
// 获取当前组件实例
// 打印看一下结构
export default {
  name: "App",
  setup(props) {
    const columnDefs = ref([
      { field: "athlete", filter: "agMultiColumnFilter" }
    ]);
    const gridApi = shallowRef();
    const defaultColDef = ref({
      flex: 1,
      minWidth: 200,
    });
    const localeText = ref(AG_GRID_LOCALE_ZZZ);
    // const sideBar = ref(null);
    const rowData = ref(null);

    // onBeforeMount(() => {
    //   sideBar.value = { toolPanels: ["filters"] };
    // });

    const onGridReady = (params) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };
    return {
      columnDefs,
      gridApi,
      defaultColDef,
      localeText,
      // sideBar,
      rowData,
      onGridReady,
    };
  },
};
</script>
